<!-- 话题详情 -->
<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<u-navbar :placeholder="true" titleStyle="font-size: 32rpx; color: #252A36;" class="nav_bg" title="已知话题" @rightClick="clickMore" :autoBack="true">
			<template slot="left">
				<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/topicIcon/_img3.png" class="nav_left"></image>
			</template>
			<template slot="right">
				<view class="nav_right" @click="show = true">
					<image v-if="isAuthor" src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/topicIcon/more.png" class="img1"></image>
					<image v-else src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/topicIcon/_img7.png" class="img2"></image>
				</view>
				<view class="showTips" @click="isSHowForm = true"><u-icon name="warning" size="40" color="#000000"></u-icon></view>
			</template>
		</u-navbar>
		<!-- #endif -->
		<!-- 内容 -->
		<view class="contents">
			<view class="titleBox">
				<!-- 标题 -->
				<view class="title">
					<view class="text">{{ info.title }}</view>
					<block v-if="info.words && info.words.length">
						<text class="txt" v-for="(item, index) in info.words" :key="index">#{{ item }}#</text>
					</block>
				</view>
				<view class="article">
					<view class="avatar">
						<view class="left">
							<avatar class="icon" :src="info.headPortrait"></avatar>
							<text class="name">{{ info.nickName }}</text>
						</view>
						<view class="right">{{ '发起于' + info.createTime }}</view>
					</view>
					<!-- 文章 -->
					<view class="articleBox">
						<view class="text">{{ info.content }}</view>
						<view class="imgs" v-if="info.imgUrl">
							<image v-for="(cell, idx) in info.imgList" :key="idx" class="pic" :src="cell" mode="widthFix" @click="checkImg(info.imgList, idx)"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="message">
				<view class="messageTitle">
					<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/topicIcon/_img2.png"></image>
					<text>精选留言</text>
				</view>
				<view class="tabBox">
					<u-tabs
						:list="tablist"
						lineWidth="30"
						lineHeight="8"
						lineColor="url('https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/topicIcon/_img5.png') 100% 100%"
						:activeStyle="{
							color: '#369CFE',
							fontWeight: 'bold',
							fontSize: '15px'
						}"
						:inactiveStyle="{
							fontSize: '15px',
							fontWeight: '500',
							color: ' #9A9A9A'
						}"
						@click="tabClick"
                        :current="tabIndex"
					></u-tabs>
				</view>
				<!-- 留言列表 -->
				<block v-if="dataList.length">
					<talkList
						:list="dataList"
						:show="showReply"
						:replyValue="replyValue"
						:replyIndex="replyIndex"
						:load="loadStatus"
						:memberId="info.memberId"
						@showReply="showReplys"
						@closeReply="closeReplys"
						@reply="reply"
					></talkList>
				</block>
				<view class="empty" v-else>
					<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/topicIcon/empty.png"></image>
					<text>评论还是空空的，快来说两句吧~</text>
				</view>
			</view>
		</view>
		<view class="bottomBtn" v-if="!isShow">
			<view class="inputbg">
				<u--input
					type="text"
					border="none"
					placeholderClass="placeholder"
					:autoBlur="true"
					placeholder="评论千万条，友善第一条"
					v-model="textValue"
					class="inpt"
					maxlength="500"
				></u--input>
			</view>
			<text @click="sendComment">我来说说</text>
		</view>
		<!-- 回复弹窗 -->
		<u-popup :show="isShow" :round="10" @close="isShow = false">
			<view class="replyPopup">
				<view class="inputbg">
					<u--input
						type="text"
						v-model="replyValue"
						class="inpt"
						border="none"
						placeholderClass="placeholder"
						:autoBlur="true"
						:focus="isShow"
						:placeholder="`回复'${replayIn.nickName}':`"
					></u--input>
				</view>
				<text @click="sendReplay">发送</text>
			</view>
		</u-popup>
		<!-- 分享 -->
		<share-popup :shareDate="shareDate" :show="show" @cancel="show = false" :isAuthor="isAuthor" @editHandler="editTopic" @delHandler="delTopicApi" :custom="1"></share-popup>
		<danger-popup :show="delShow" title="提示" content="话题删除后不可恢复,确认吗？" @confirm="sureDel" @cancel="delShow = false"></danger-popup>
		<!-- 投诉弹窗 -->
		<u-popup :show="isSHowForm" mode="bottom" @close="isSHowForm = false">
			<view class="tousuBar">
				<view style="border-bottom: 2rpx solid #efefef;" @click="jubaoTips">
					<u-icon name="info-circle"></u-icon>
					<text>举报该话题</text>
				</view>
				<view @click="pingbi">
					<u-icon name="eye-off"></u-icon>
					<text>屏蔽该话题</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { topicDetail, addComment, parentComment, childComment, delTopic, getUserData, CleanFn } from '@/apis/apis.js';
import talkList from '../modules/talkList.vue';
import sharePopup from '@/components/share.vue';
import avatar from '@/components/avatar.vue';
import dangerPopup from '@/components/dangerPopup/dangerPopup.vue';
export default {
	components: {
		talkList,
		sharePopup,
		avatar,
		dangerPopup
	},
	data() {
		return {
			id: '',
			info: {},
			user: {},
			textValue: '',
			replyValue: '',
			dataList: [],
			tablist: [
				{
					name: '最热'
				},
				{
					name: '最新'
				}
			],
			tabIndex: 0, //tabs的下标
			showReply: false, //展示或收起
			replyIndex: -1, // 回复
			replayIn: {},
			show: false, //分享弹窗
			isShow: false, // 回复弹窗
			keyboardHeight: 0,
			focusStatus: false,
			searchType: 0, //排序类型（0：最热，1：最新）
			pageNum: 1,
			pageSize: 10,
			loadingMore: true, // 是否加载更多
			loadStatus: 'nomore',
			isAuthor: false,
			shareDate: {},
			delShow: false,
			isSHowForm: false
		};
	},
	onLoad(options) {
		this.id = options.id;
	},
	onShow() {
		this.init();
	},
	watch: {
		textValue(newVal, oldVal) {
			if (newVal.length > 500) {
				uni.showToast({
					title: '已超出输入字数限制',
					icon: 'none'
				});
			}
		},
		dataList: {
			deep: true,
			handler(newVal, oldVal) {
				console.log(newVal, oldVal);
			}
		}
	},
	methods: {
		// 初始化
		init() {
			this.getUserDataApi();
			this.getDetailInfo();
		},
		getUserDataApi() {
			getUserData().then(res => {
				console.log(res);
				this.user = res.data;
			});
		},
		// 获取详情
		async getDetailInfo() {
			const res = await topicDetail(this.id);
			if (res.data.workKey) {
				res.data.words = res.data.workKey.split(',');
			}
			if (res.data.imgUrl) {
				res.data.imgList = res.data.imgUrl.split(',');
			}
			this.info = res.data;
			if (res.data.memberId == this.user.memberId) {
				this.isAuthor = true; //是否作者
			}
			this.$nextTick(() => {
				this.getCommentsList();
			});
		},
		// 获取评论
		async getCommentsList() {
			// 一级评论
			let res = await parentComment({
				objectId: this.id, // 主键ID
				objectType: 1, // 查看数据类型（0：课程，1：话题）
				searchType: this.searchType, //排序类型（0：最热，1：最新）
				pageNum: this.pageNum,
				pageSize: this.pageSize
			});
			res.data.forEach(el => {
				el.replys = [];
				el.openSize = 1;
				if (el.commentNum) {
					childComment({
						pageNum: 1,
						pageSize: el.commentNum,
						pid: el.id
					}).then(res => {
						console.log(res);
						res.data.forEach((ele, idx) => {
							ele.isShow = false;
						});
						el.replys = res.data;
						el.replys[0].isShow = true;
					});
				}
			});

			if (res.data.length < this.pageSize) {
				this.loadingMore = false;
				// console.log('not more')
			}
			this.dataList = this.dataList.concat(res.data);
			this.$forceUpdate();
		},
		// 发起评论
		sendComment() {
			if (!this.textValue) return;
			let data = {
				content: this.textValue,
				objectId: this.id,
				objectType: 1
			};
			this.addCommontApi(data);
		},
		// 回复评论弹出
		reply(val) {
			this.isShow = true;
			this.replayIn = val;
		},
		// 发送回复
		sendReplay() {
			if (!this.replyValue) return;
			let data = {
				content: this.replyValue,
				objectId: this.id,
				objectType: 1,
				pid: this.replayIn.id,
				replyMemberId: this.replayIn.memberId
			};
			this.addCommontApi(data);
		},
		// 新评论
		addCommontApi(data) {
			addComment(data).then(res => {
				console.log(res);
				if (res.code == 200) {
					uni.showToast({
						title: '发送成功'
					});
					this.textValue = null;
					this.replyValue = null;
					this.isShow = false;
					this.dataList = [];
					this.pageNum = 1;
					this.getCommentsList();
					this.$forceUpdate();
				}
			});
		},
		// 查看图片
		checkImg(list, idx) {
			this.$imgPreview(list, idx);
		},
		//选择最热还是最新
		tabClick(e) {
			// console.log(e)
			this.tabIndex = e.index;
			this.searchType = e.index;
			this.dataList = [];
			this.getCommentsList();
		},
		//展示评论
		showReplys(item, index) {
			console.log(item.openSize <= item.commentNum);
			if (this.dataList[index].openSize > this.dataList[index].commentNum) return;
			this.dataList[index].openSize += 5;
			this.dataList[index].replys.forEach((el, idx) => {
				if (idx <= this.dataList[index].openSize - 1) {
					el.isShow = true;
				}
			});
			this.$forceUpdate();
		},
		//收起评论
		closeReplys(item, index) {
			console.log(item, index);
			this.dataList[index].replys.forEach((el, idx) => {
				el.isShow = false;
			});
			this.dataList[index].replys[0].isShow = true;
			this.dataList[index].openSize = 1;
		},
		// 分享
		clickMore() {
			this.show == true;
			this.shareDate = {
				serviceId: this.info.id, // 业务id
				title: this.info.title,
				summary: this.info.content,
				imageUrl: this.info.imgUrl ? this.info.imgUrl.split(',')[0] : this.info.headPortrait,
				type: 0, //0	图文 1	纯文字 2	纯图片 3	音乐 4	视频 5	小程序
				memberId: uni.getStorageSync('USER_DATA').memberId, //用户id
				objectType: 1 // 0课程 1话题 2拼单
			};
		},
		// 点击编辑
		editTopic() {
			this.show = false;
			uni.navigateTo({
				url: '/pages/topic/release/release?id=' + this.id
			});
		},
		//点击删除
		delTopicApi() {
			this.show = false;
			this.delShow = true;
		},
		async sureDel() {
			const res = await delTopic(this.id);
			if (res.code == 200) {
				this.delShow = false;
				uni.showToast({
					title: '话题已删除',
					icon: 'none'
				});
				uni.navigateBack();
			}
		},
		// 举报
		jubaoTips() {
			uni.showToast({
				icon: 'none',
				title: '举报成功,审核人员会尽快处理该话题。'
			});
			this.isSHowForm = false;
		},
		async pingbi() {
			const res = await CleanFn({
				type: 1,
				objectId: this.id
			});
			if (res.code == 200) {
				uni.showToast({
					icon: 'success',
					title: '屏蔽成功'
				});
				this.isSHowForm = false;
				setTimeout(function() {
					uni.navigateBack({
						delta: 1
					});
				}, 500);
			}
		}
	},
	onReachBottom() {
		console.log('触底了');
		if (!this.loadingMore) {
			this.loadStatus = 'nomore';
			return;
		}
		this.loadStatus = 'loading';
		setTimeout(() => {
			this.pageNum++;
			this.getCommentsList();
			this.loadStatus = 'loadmore';
		}, 1500);
	}
};
</script>

<style scoped lang="scss">
.nav_bg {
	.nav_left {
		width: 16rpx;
		height: 28rpx;
	}

	.nav_right {
		.img2 {
			width: 34rpx;
			height: 32rpx;
		}

		.img1 {
			width: 46rpx;
			height: 11rpx;
		}
	}
	.showTips {
		margin-left: 30rpx;
		width: 40rpx;
		height: 40rpx;
		font-size: 34rpx;
	}
}
.bottomBtn {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 30rpx 0;
	display: flex;
	justify-content: space-around;
	align-items: center;
	z-index: 9;
	overflow: hidden;
	background: #fff;
	box-shadow: 0rpx -1rpx 15rpx 0rpx rgba(80, 80, 80, 0.06);

	.inputbg {
		width: 75%;
		height: 70rpx;
		background: rgba(243, 243, 243, 0.7);
		border-radius: 36rpx;
		display: flex;
		align-items: center;
		padding: 0 26rpx;

		.inpt {
			width: 100%;
			height: 100%;
			font-size: 26rpx;
			font-family: Source Han Sans CN;
			color: #000;
		}

		::v-deep .placeholder {
			font-size: 26rpx;
			font-family: Source Han Sans CN;
			color: #9f9f9f;
		}
	}

	& > text {
		font-size: 26rpx;
		font-family: Source Han Sans CN;
		color: #194FC9;
	}
}

.contents {
	width: 100vw;
	height: fit-content;
	background: #f5f5f5;
	overflow: hidden;

	.message {
		height: fit-content;
		background: #fff;
		padding: 30rpx 30rpx 130rpx 30rpx;

		.messageTitle {
			display: flex;
			align-items: center;
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #303030;

			& > image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 12rpx;
			}
		}
	}

	.titleBox {
		background: #fff;
		margin-bottom: 16rpx;

		.title {
			padding: 40rpx 30rpx;
			border-bottom: 1rpx solid #e9e9e9;
			border-top: 1rpx solid rgba(0, 0, 0, 0.15);
			font-family: Source Han Sans CN;
			line-height: 52rpx;
			word-break: break-all;

			.text {
				color: #161616;
				font-size: 34rpx;
				display: inline;
				font-weight: 500;
			}

			.txt {
				font-size: 30rpx;
				margin: 0 10rpx;
				color: #194FC9;
			}
		}

		.article {
			.avatar {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-family: PingFang SC;
				font-weight: 500;
				padding: 30rpx;

				.left {
					display: flex;
					align-items: center;
					font-size: 26rpx;
					color: #7e7e7e;

					.icon {
						display: block;
						width: 60rpx;
						height: 60rpx;
						margin-right: 18rpx;
						border-radius: 50%;
						overflow: hidden;
					}

					.name {
						font-size: 26rpx;
					}
				}

				.right {
					font-size: 24rpx;
					color: #969696;
				}
			}

			.articleBox {
				padding: 30rpx;

				.text {
					text-indent: 2em;
					font-size: 30rpx;
					color: #504d4d;
					line-height: 54rpx;
					word-wrap: break-word;
					// word-break: break-all;
				}

				.imgs {
					display: flex;
					flex-wrap: wrap;
				}
			}
		}
	}
}

.empty {
	font-size: 28rpx;
	font-family: Source Han Sans CN;
	color: #595a5a;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: 35rpx;

	& > image {
		width: 448rpx;
		height: 394rpx;
		margin-bottom: 22rpx;
	}
}

.replyPopup {
	width: 100%;
	padding: 30rpx 0;
	display: flex;
	justify-content: space-around;
	align-items: center;

	.inputbg {
		width: 80%;
		height: 80rpx;
		background: #f5f5f5;
		border-radius: 14rpx;
		display: flex;
		align-items: center;
		padding: 0 32rpx;

		.inpt {
			width: 100%;
			height: 100%;
			font-size: 26rpx;
			font-family: Source Han Sans CN;
			color: #9f9f9f;
		}

		.placeholder {
			font-size: 26rpx;
			font-family: Source Han Sans CN;
			color: #9f9f9f;
		}
	}

	& > text {
		font-size: 26rpx;
		padding: 0 10rpx;
		font-family: Source Han Sans CN;
		color: #194FC9;
	}
}
.tousuBar {
	view {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 30rpx 0;
		font-size: 28rpx;
		text {
			margin-left: 20rpx;
		}
	}
}
</style>
